<!--suppress ALL -->
<script lang="ts">
export default {
  name: "RepositoryProductCardTable"
}
</script>

<template>
  <el-row :gutter="10">
    <el-col
      v-for="(item, index) in dataState.entityList"
      :key="index"
      :span="6"
    >
      <el-card :body-style="{ padding: '0px' }">
        <img :src="item.imageUrl" style="height: 320px; width: 100%;" />

        <div style="padding: 10px;height: 220px">
          <div style="height: 30px">
            <p
              style="display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;">
              产品型号：{{ item.deviceType }}
            </p>
          </div>
          <div style="height: 30px">
            <p
              style="display: -webkit-box;  -webkit-line-clamp: 4;  -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;">
              生产厂商：{{ item.manufacturer }}
            </p>
          </div>
          <div style="height: 100px">
            <p
              style="display: -webkit-box;  -webkit-line-clamp: 4;  -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;">
              产品简介：{{ item.description }}
            </p>
          </div>
          <div style="float: right;">
            <el-button :icon="More" circle plain type="primary" @click.stop="handleDetail(item)"/>
            <el-button :icon="Link" circle plain type="primary" @click.stop="handleLink(item.url)"/>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <!-- 分页工具条 -->
  <pagination v-if="dataState.total > 0" v-model:limit="dataState.queryParams.pageSize"
              v-model:page="dataState.queryParams.pageNum" :total="dataState.total"
              @pagination="handleQuery"/>
</template>

<script lang="ts" setup>
import {onMounted, reactive, toRefs} from "vue";
import {useRouter} from "vue-router";

import {
  RepoProductEntity, RepoProductQueryParam, RepoProductComp
} from "@/api/device/product/types";
import {
  listEntityList,
} from "@/api/device/product";
import {Link, More} from '@element-plus/icons-vue';

const emit = defineEmits(['rowClick']);// 定义组件的事件通知
const router = useRouter();

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({refreshTable});

// 数据状态：定义
let dataState = reactive({
  // 页面转载状态
  loading: false,
  // 选中ID数组
  selects: [],
  // 记录总数
  total: 0,
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 实体数据
  entityList: [] as RepoProductEntity[],
  // 查询参数
  queryParams: {modelType: 'decoder', pageNum: 1, pageSize: 8} as RepoProductQueryParam,
});

/**
 * 捕获列表中的选择变化
 * @taskParam selection
 */
function handleSelectionChange(selection: any) {
  dataState.selects = selection.map((item: any) => item);
  dataState.single = selection.length !== 1;
  dataState.multiple = !selection.length;
}

/**
 * 捕获列表中的行选择
 * @taskParam row
 */
function handleRowClick(row: any) {
  emit('rowClick', row);
}

function handleLink(url: string) {
  window.open(url);
}

function handleDetail(row: any) {
  router.push('/repo-comp/cloud/repo-comp-product-detail?uuid=' + row.uuid);
}

/**
 * 刷新表单
 */
function refreshTable(queryParams: RepoProductQueryParam) {
  dataState.queryParams = queryParams;
  if (dataState.queryParams.keyWord === '') {
    dataState.queryParams.source = undefined;
  }

  handleQuery();
}

/**
 * 刷新页面信息
 */
function handleQuery() {
  emit('rowClick', {});

  listEntityList(dataState.queryParams).then(({data}) => {
    data.list.forEach(value => {
      for (let comp of value.comps as RepoProductComp[]) {
        comp.productId = value.uuid;
      }
      value.imageUrl = "http://repository.fox-tech.cn/image/" + value.image;

      dataState.entityList.push(value)
    });

    dataState.entityList = data.list;
    dataState.total = data.total;
  });
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
  // 查询实体数据
  handleQuery();
});

</script>
